---
import MenuBox from "@components/menuBox.astro";
import p1 from "@assets/product/蒙版组 23.png"
---
<div class="w-[588px]">
    <MenuBox title="新增产品">
       
        <div class="h-[296px] mt-[30px] relative">
            <div class="border-box"></div>
<img src={p1.src} alt="" class="w-[246px] h-[246px] ml-[30px] float-left pr-[16px]">
<div >
    <div class="flex items-center">
        <span class="text-[36px] font-normal pr-[2px]">14/</span>
    <span class="text-999 text-[14px]">
        <span class="w-full block">11月</span>
        <span class="w-full block">2023</span>
    </span>
    </div>
    <span class="pb-[20px] title">开关电源纹波产生的原因和优化方法</span>
    <div class="des">
        开关稳压器的高效率特性，使其在越来越多的领域逐渐替代线性稳压器(LDO)。但由于电源的开关特性，使得不少工程师产生……
    </div>
    <button class="read-btn text-999 text-[14px] w-[90px] h-[28px] mt-[40px]">阅读全文</button>
</div>

</div>
</div>
    </MenuBox>
</div>
<style lang="scss" scoped>
    .read-btn{
        border: 1px solid #999;
        &:hover{
        border-color: #712C2F;
        background-color: #712C2F;
        color: #fff;
    }
    }
    .border-box{
        width: 200px;
height: 226px;
border-radius: 2px;
opacity: 1;
box-sizing: border-box;
border: 1px solid #999999;
position: absolute;
left: 16px;
top: -16px;
    }
    .title{
        border-bottom: 1px solid gray;
    }
    .des{
        color: #3D3D3D;
        font-size: 14px;
        font-weight: normal;
        margin-top: 40px;
        padding-right: 10px;
    }
</style>